<template>
    <div class="bodyy">
    <el-collapse accordion v-model="activeName">
        <el-collapse-item name="1">
        <template slot="title" >
          <div class="title">
            <img src="../../assets/8.svg" alt="">
            <span id="qyyb">企业研报</span>
          </div>
        </template>
        <div class="content">
          <el-table
            :data="qyyb.content.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
            border
            style="width: 100%"
            :header-cell-style="{background:'rgb(237,244,255)'}"
            >
            <el-table-column
              type="index"
              label="序号"
              width="50"
              style="text-align: right!important;">
            </el-table-column>
            <el-table-column
            prop="RESEARCHDATEX"
            label="发布日期"
            width="180" >
            </el-table-column>
            <el-table-column
            prop="RESEARCHTITLE"
            label="研报标题"
            >
            </el-table-column>
            <el-table-column
            label="下载路径"
            width="200">
            <template slot-scope="scope">
                <a style="margin-left: 10px" :href="scope.row.RESEARCHURL" target="_blank">企业研报查看下载路径</a>
            </template>
            </el-table-column>
          </el-table>
          <div style="float:right;margin-top: 10px;">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              layout="total,prev,pager,next"
              :total="qyyb.content.length" >
            </el-pagination>
          </div>
        </div>
        </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name:'QYYB',
    data(){
        return {
            activeName:'1',
            currentPage: 1,  // 当前页码
            pageSize: 10,  // 每页显示的行数
        }
    },
    computed:{
        ...mapState({
            qyyb:state => state.stock.stockInfo['企业研报']
        })
    },
    mounted(){
    },
    methods: {
      // 页面切换方法
      handleCurrentChange(val) {
        this.currentPage = val;
      }
    }
};
</script>

<style lang="less" scoped>
.bodyy {
    padding: 0 20px 20px 20px;
    background: #FFFFFF;
    border: 1px solid rgba(226,226,226,0.50);
    box-shadow: 0 4px 14px 0 rgba(209,225,242,0.46);
    border-radius: 2px;
    margin-top: 25px;
}
.title {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    img {
        width: 30px;
        height: 30px;
    }
    span {
        font-size: 20px;
        margin-left: 12px;
    }
}
.content {
    width: 100%;
    // height: 264px;
    // border: 1px solid #E9ECF3;
    /deep/ .my-label {
        background: rgb(241,247,255);
        width: 10%;
    }
    /deep/ .my-content {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgba(0,0,0,0.85);
        padding: 12px 25px;
        width: 20%;
    }
}
/deep/ .el-table tbody tr:hover>td {
background: rgb(219,233,255)!important;
}
// 序号靠右
/deep/ .el-table_2_column_6 .cell {
  text-align: center!important;
}
//修改收缩框title的高度
/deep/ .el-collapse-item__header {
    height: 70px!important;
}
</style>